import React from 'react'
import './page-list.less'

function ListItem({ data }) {
  const toPath = (data) => {
    window.open(data.path)
  }
  return (
    <div className="list-item" onClick={() => { toPath(data) }}>
      <div className="icon">{data.name[0]}</div>
      <div className="text">{data.name}</div>
    </div>
  )
}

function Page({ showModel, data }) {
  console.log('data', data)
  return (
    <div className="list-box">
      {data.map((i, k) => <ListItem key={i.id} data={i} />)}
      <div className="list-item-add" onClick={showModel}>添加新导航</div>
      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(i => <div key={i} className="list-item-null"></div>)}
    </div>
  )
}

export default Page